<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-button type="info" @click="setState">setState</el-button>
      </el-col>
      <el-col :span="24">
        <el-button type="primary" @click="store.$reset()"
          >store reset</el-button
        >
        <el-button type="primary" @click="changeCom">patch批量改变值</el-button>
      </el-col>
      <el-col :span="24">
        <el-button type="primary">age:{{ age }}</el-button>
        <el-button type="primary" @click="store.age++">简单改变值</el-button>
      </el-col>
      <el-col :span="24">
        <el-button type="primary">count:{{ count }}</el-button>
        <el-button type="primary" @click="changeC">简单改变值</el-button>
      </el-col>
      <el-col :span="24">
        <el-button type="primary">按钮 {{ otherGetter }}</el-button>
        <el-button type="primary">按钮 {{ getUserById }}</el-button>
        <el-button type="primary">按钮</el-button>
      </el-col>
      <el-col :span="24">
        <li v-for="item in userList">{{ item.name }}--{{ item.age }}</li>
      </el-col>
      <el-col :span="24" v-if="user">{{ user.name }}--{{ user.age }}</el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import action from "../qiankun/actionb"; // 模块一
import { appCommu } from "../store/appCommunication";
import { storeToRefs } from "pinia";
import { computed, ref } from "vue";
// 模块一
let locState: Record<string, any>;
action.onGlobalStateChange(
  (state: Record<string, any>, prev: Record<string, any>) => {
    console.log(state, prev);
    locState = state;
  },
  true
);
let setState = () => {
  locState.abc++;
  action.setGlobalState(locState);
};
// 模块二 pinia
const store = appCommu();
// 简单改变值 direct
let changeC = () => {
  store.count++;
};
// patch
let changeCom = () => {
  // patch object
  store.$patch({
    age: 120,
    count: 122,
  });
  // patch function
  store.$patch((state) => {
    state.userList.push({
      name: "shoes-" + state.localData,
      age: 18,
      id: state.localData,
      active: false,
    });
    state.user = { name: "jian", age: 11, id: 666 };
    state.localData++;
  });
};
let userId = ref(23);
let getUserById = computed(() => store.getUserById(userId.value));
// 解构-响应式 storeToRefs
const { age, count, user, userList, otherGetter } = storeToRefs(store);
console.log(userList);
</script>
<style scoped>
.el-col {
  margin-bottom: 20px;
}
</style>
